<template>
  <os-table autoHeight stripe action="system/dictPage" :columns="columns" :form="form" ref='osTable' :btn="btn" size="small" border></os-table>
</template>

<script>
export default {
  name: 'DictPage',
  data () {
    return {
      form: {
        rule: [
          { type: 'Input', title: '字典编码', field: 'dictCode' },
          { type: 'Input', title: '字典名称', field: 'dictName' },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { text: '新增', cb: cb => this.onAdd() }
      ],
      columns: [
        // {label: 'id', prop: 'id'},
        { label: '字典编码', prop: 'dictCode' },
        { label: '字典名称', prop: 'dictName' },
        { label: '描述', prop: 'description' },
        {
          label: '类型',
          prop: 'type',
          renderCell: ({ row }) => {
            let showData = ''
            if (row.type === '1') {
              showData = '列表'
            } else if (row.type === '2') {
              showData = '树型'
            }
            return <span>{showData}</span>
          }
        },
        { label: '排序号', prop: 'sortNo' },
        {
          label: '操作',
          prop: 'action',
          renderCell: (data) => (
            <div>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onEdit(data)}
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onDel(data)}
              >
                删除
              </el-button>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onEditValueItem(data)}
              >
                字典集项
              </el-button>
            </div>
          )
        }
      ],
      fApi: null,
      rule: [
        {
          type: 'Select',
          title: '类型',
          field: 'type',
          options: [{ value: '1', label: '列表' }, { value: '2', label: '树型' }],
          validate: [this.$v.required()]
        },
        {
          type: 'Input', title: '字典编码', field: 'dictCode', validate: [this.$v.required()]
        },
        {
          type: 'Input', title: '字典名称', field: 'dictName', validate: [this.$v.required()]
        },
        {
          type: 'InputNumber',
          title: '排序号',
          field: 'sortNo',
          // value: 0,
          col: {
            span: 12
          },
          validate: [this.$v.inputNumber()],
          props: {
            min: 0,
            max: 9999,
            placeholder: '0~9999,数值越小越靠前'
          }
        },
        { type: 'div', children: ['0~9999，取值越小越靠前'], col: { span: 12 }, class: 'm-l-10 c-f00' },
        { type: 'Input', title: '描述', field: 'description' }
      ],
      options: {
        ...this.$utils.formOptions(100, 24),
        mounted: $f => {
          // this.$utils.setOptions($f, 'type', this.$c.dictCode.字典类型, 'itemText', 'itemValue')
          // this.fApi.updateRule('type', [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }], true)
        }
      }
    }
  },
  methods: {
    onAdd (row = null) {
      const btn = [{ text: '保存', loading: true, cb: cb => this.save(cb, row) }]
      const o = {}
      for (const item of this.rule) {
        o[item.field] = null
      }
      this.$utils.dialog(`${row ? '编辑' : '添加'}字典`, <form-create vModel={this.fApi} rule={this.rule} option={this.options}/>,
        { btn, width: '60%' })
      this.$nextTick(() => {
        this.fApi.updateRules({
          code: {
            props: {
              disabled: !!row
            }
          },
          type: {
            props: {
              disabled: !!row
            }
          }
        })
        if (!row) {
          o.type = '1' // 默认列表
          this.fApi.setValue(o)
          return
        }
        this.fApi.setValue(row)
      })
    },
    save (cb, row) {
      // console.log(row)
      this.fApi.validate(async (valid) => {
        cb()
        if (valid) {
          const formData = this.fApi.formData()
          formData.id = row?.id
          const action = row ? 'system/dictUpdate' : 'system/dictInsert'
          const { error } = await this.$store.dispatch(action, formData)
          if (!error) {
            this.$utils.message.success('保存成功')
            this.fApi.resetFields()
            this.$utils.hideDialog()
            this.$refs.osTable.getData()
          }
        }
      })
    },
    onEdit ({ row }) {
      this.onAdd(row)
    },
    async onDel ({ row }) {
      const re = await this.$utils.confirm('确定要删除吗？')
      if (!re) return
      const { error } = await this.$store.dispatch('system/dictDel', row.id)
      // console.info('-----------data: ' + JSON.stringify(data))
      if (!error) {
        this.$utils.message.success('删除成功')
        this.$refs.osTable.getData()
      }
    },
    onEditValueItem ({ row }) {
      if (row.type === '1') {
        // this.$tab.add(`/system/valuesetList?setCode=${row.code}`, '值集项列表管理')
        // return
        const routeData = this.$router.resolve({ // $router.resolve
          path: '/sys/dictItem',
          query: { dictItemCode: row.dictCode }
        })
        window.open(routeData.href, '_blank')
      }
      // this.$tab.add(`/system/valuesetTree?setCode=${row.code}`, '值集项树形管理')
    }
  }
}
</script>

<style lang="scss" scoped>
.m-l-10 {
  margin-left: 10px;
}
.c-f00 {
  color: #ff0000;
}
</style>
